<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .bgbg1 {
        width: 100%;
        height: 20vh;
        /* 开启盒子模型（在父元素的样式中开启） */
        display: box;
        display: -moz-box;
        display: -webkit-box;

        /* 整体垂直分布 */
        /* -webkit-box-orient: vertical; 
        -moz-box-orient: vertical; */
        /* 整体水平分布 (默认） */
        /* -webkit-box-orient: horizontal; 
        -moz-box-orient: horizontal; */

    }
    /* 空间分配 flex 要在每个子元素设置1（分配剩余空间）或者其他比例*/
    .bg-1 {
        width: 200px;
        height: 100px;
        background-color: rgb(12, 29, 129);
        box-flex: 2;
        -webkit-box-flex: 2;
    }
    .bg-2 {
        width: 200px;
        height: 100px;
        background-color: rgb(4, 105, 0);
        -webkit-box-flex: 1;
    }
    .bg-3 {
        width: 200px;
        height: 100px;
        background-color: rgb(106, 12, 129);
        -webkit-box-flex: 2;
    }

    /* 实现网页元素水平和垂直居中对齐 */
    .bgbg2 {
        width: 100%;
        height: 40vh;
        background-color: rgb(161, 127, 127);
        /* 开启盒子模型（在父元素的样式中开启） */
        display: box;
        display: -moz-box;
        display: -webkit-box;

        /* 水平对齐 */
        box-pack: center;
        -webkit-box-pack: center;
        /* 垂直对齐 */
        box-align: center;
        -webkit-box-align: center;
    }
    .bg-4 {
        width: 200px;
        height: 100px;
        background-color: rgb(12, 29, 129);
    }
    .bg-5 {
        width: 200px;
        height: 100px;
        background-color: rgb(4, 105, 0);
    }
    .bg-6 {
        width: 200px;
        height: 100px;
        background-color: rgb(106, 12, 129);
    }
    </style>
</head>
<body>
    <div class="bgbg1">
        <div class="bg-1">
            111
        </div>
        <div class="bg-2">
            222
        </div>
        <div class="bg-3">
            333
        </div> 
        <p></p>
    </div>

    <div class="bgbg2">
        <div class="bg-4">
            444
        </div>
        <div class="bg-5">
            555
        </div>
        <div class="bg-6">
            666
        </div> 
        <p></p>
    </div>
</body>
</html>